<template>
  <div class="storeorder-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="时间选择：" class="width100">
        <a-radio-group v-model:value="searchParams.dateLimit" button-style="solid" class="mr20"
          @change="selectChange(searchParams.dateLimit)">
          <a-radio-button v-for="(item, i) in DAYS_TYPE" :key="i" :value="item.value">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker v-model:value="timeVal" value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="提现状态：" class="width100">
        <a-radio-group v-model:value="searchParams.status" button-style="solid" class="mr20">
          <a-radio-button value=""> 全部 </a-radio-button>
          <a-radio-button value="0"> 审核中 </a-radio-button>
          <a-radio-button value="1"> 已提现 </a-radio-button>
          <a-radio-button value="-1"> 已拒绝 </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="提现方式：" class="width100">
        <a-radio-group v-model:value="searchParams.extractType" button-style="solid" class="mr20">
          <a-radio-button value=""> 全部 </a-radio-button>
          <a-radio-button value="bank"> 银行卡 </a-radio-button>
          <a-radio-button value="alipay"> 支付宝 </a-radio-button>
          <a-radio-button value="weixin"> 微信 </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="订单号：">
        <a-input v-model:value="searchParams.keywords" placeholder="请输入姓名、电话、订单ID" class="selWidth" clearable />
      </a-form-item>
    </search-form>

    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />
  </div>
</template>

<script setup lang="tsx">
import { userextractDel, getPageList } from "./api";
import type { Iuserextract } from "./entity";
import { PAY_TYPE, DAYS_TYPE } from "@/utils/constant";

const searchParams = reactive({
  prop: "",
  status: "",
  keywords: "",
  extractType: "",
  dateLimit: "",
  date: "",
});

let visible = $ref(false);
const { tableRef, columns, search } = useTable<Iuserextract>([
  { title: "ID", dataIndex: "id" },
  {
    title: "用户信息",
    dataIndex: "uid",

    customRender: ({ record }) => (
      <>
        <p>用户昵称：{record.nickName}</p>
        <p>用户id：{record.uid}</p>
      </>
    ),
  },
  { title: "提现金额", dataIndex: "extractPrice" },
  { title: "提现方式", dataIndex: "extractType" },
  {
    title: "账号",
    dataIndex: "price",
    customRender: ({ record }) => (
      <>
        <div v-if={record.extractType === "bank"}>
          <p>姓名：{record.realName}</p>
          <p>卡号：{record.bankCode}</p>
          <p>开户行：{record.bankName}</p>
        </div>
        <span v-else-if={record.extractType === "alipay"}>
          <p>姓名：{record.realName}</p>
          <p>支付宝号：{record.alipayCode}</p>
          <div class="acea-row">
            收款码：
            <div class="demo-image__preview" v-if={record.qrcodeUrl}>
              <img src={record.qrcodeUrl} />
            </div>
            <div v-else>无</div>
          </div>
        </span>
        <span v-else-if={record.extractType === "weixin"}>
          <p>姓名：{record.realName}</p>
          <p>微信号：{record.wechat}</p>
          <div class="acea-row">
            收款码：
            <div class="demo-image__preview" v-if={record.qrcodeUrl}>
              <img src={record.qrcodeUrl} />
            </div>
            <div v-else>无</div>
          </div>
        </span>
        <span v-else>已退款</span>
      </>
    ),
  },
  {
    title: "审核状态",
    dataIndex: "status",
    customRender: ({ record }) => (
      <>
        <span class="spBlock"> {record.status}</span>
        <span v-if={record.status === -1}>拒绝原因：{record.failMsg}</span>
        <template v-if={record.status === 0}>
          <a-button
            type="danger"
            icon="el-icon-close"
            size="mini"
            onClick={() => onExamine(record)}
          >
            未通过
          </a-button>
          <a-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            onClick={() => ok(record)}
          >
            通过
          </a-button>
        </template>
      </>
    ),
  },
  { title: "支付时间", dataIndex: "payTime" },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);
let timeVal = $ref<string[]>(["", ""]);
let activeRow = $ref<Partial<Iuserextract>>({});
function add(row: Partial<Iuserextract> = {}) {
  activeRow = { ...row };
  visible = true;
}
function onchangeTime(e: string[]) {
  timeVal = e;
  searchParams.dateLimit = e ? e.join(",") : "";
  search(false);
}
function onExamine(row: Iuserextract) { }
function ok(row: Iuserextract) { }
// 选择时间
function selectChange(tab: string) {
  searchParams.date = tab;
  timeVal = [];
  search(false);
}
function remove({ id }: Iuserextract) {
  userextractDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
